<script setup>
import { ref,reactive,computed,watch,watchEffect } from "vue";
import { useStore } from "@/store";
import { useRouter } from "vue-router";
import {useStore as RouterStore} from "@/store/modeles/router";
import {useStore as MenuStore} from "@/store/modeles/menu";
const router=useRouter()
const route=useRoute()
const store=useStore()
const menuStore=MenuStore()
function exitLogin(){
	store.exitLogin()
	router.push({
		name:"login"
	})
}
const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}

const routerStore=RouterStore()
// console.log("useStore().router:",useStore().router);
const breadcrumbList=computed(()=>{
	let breadcrumbList=[]
	const paths=route.path.match(/\/\w+/g)
	let routerObj={},path="",
		routerArr=routerStore.router
	for(let pathTemp of paths){
		routerObj=routerArr.find(item=>{
			if(pathTemp===item.path||pathTemp==="/"+item.path){
				return true
			}
		})
		if(routerObj&&routerObj.path){
			routerArr=routerObj.children
			breadcrumbList.push({
				title:routerObj.meta.title,
				path:path+"/"+routerObj.name
			})
			path+=routerObj.path
		}
	}
	return breadcrumbList
})
function openLink(link){
	if(route.path!==link){
		router.push({
			path:link
		})
	}
}
function setMenu(){
	menuStore.setMenu()
}
</script>


<template>
	<div class="header" :class="menuStore.leftClass">
		<div class="nav">
			<div class="icon1" @click="setMenu">
				<el-icon>
					<svg-icon name="toolbar-collapse" />
				</el-icon>
			</div>
			<el-breadcrumb separator="/">
				<template v-for="item in breadcrumbList" :key="item.path">
					<el-breadcrumb-item v-if="item.path===route.path">{{item.title}}</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path:item.path }" v-else>{{item.title}}</el-breadcrumb-item>
				</template>
			</el-breadcrumb>
		</div>
		<div>
			  <el-dropdown v-if="store.isLogin===true">
				<span class="center">
					<el-avatar
						src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
					/>
					{{store.username}}
				<el-icon>
					<arrow-down />
				</el-icon>
				</span>
				<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item @click="openLink('/dashboard/data')">控制台</el-dropdown-item>
					<el-dropdown-item @click="openLink('/personal/setting')">个人设置</el-dropdown-item>
					<el-dropdown-item @click="exitLogin" divided>退出登录</el-dropdown-item>
				</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
	</div>
</template>


<style scoped>
.center{
	display: flex;
	flex-direction: row;
	justify-content: center;
    align-items: center;
}
.nav{
	display: flex;
	flex-direction: row;
	justify-content: center;
    align-items: center;
}
.header{
	height: 100%;
	padding:0 20px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
    align-items: center;
	/* background-color: #fff; */
}

.flex-grow {
  flex-grow: 1;
}
.icon1{
	display: flex;
    align-items: center;
    padding: 0 20px;
    height: 50px;
	cursor: pointer;
}
.icon1:hover{
	color: #409eff;
}
.icon1 .el-icon{
	transition:transform .1s ;
}
.hide .icon1 .el-icon{
	transform: rotate(180deg);
}
</style>